<template>
  <div style="margin-top: 5px;">
    <titleBox text="重点关注" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding:10px;border: 1px solid #11afc180;">
        <div class="top">
          <div :class="isChecked == 0 ? 'top_item_checked' : 'top_item'" @click="checkedChange(0)">
            <div class="top_item_leftIcon" style="background-image: url('/img/myimg/ry.png');"></div>
            <div class="top_item_name">人员</div>
            <div class="top_item_num">{{ valueData[0].length }}</div>
          </div>
          <div :class="isChecked == 1 ? 'top_item_checked' : 'top_item'" @click="checkedChange(1)"
            style="margin: 0 10px;">
            <div class="top_item_leftIcon" style="background-image: url('/img/myimg/dd.png');"></div>
            <div class="top_item_name">地点</div>
            <div class="top_item_num">{{ valueData[1].length }}</div>
          </div>
          <div :class="isChecked == 2 ? 'top_item_checked' : 'top_item'" @click="checkedChange(2)">
            <div class="top_item_leftIcon" style="background-image: url('/img/myimg/sj.png');"></div>
            <div class="top_item_name">事件</div>
            <div class="top_item_num">{{ valueData[2].length }}</div>
          </div>
        </div>
        <mTableAuto v-if="valueData[isChecked].length > 5" :titleData="titleData[isChecked]"
          :valueData="valueData[isChecked]" @clickBtn="c"></mTableAuto>
        <mTable v-else :titleData="titleData[isChecked]" :valueData="valueData[isChecked]" @clickBtn="clickRow">
        </mTable>
        <gzryModal ref="gzryModalRef" @rowClick="rowClick"></gzryModal>
        <rqxqModal ref="rqxqModalRef" @close="rqxqModalClose"></rqxqModal>
        <sjxqModal ref="sjxqModalRef"></sjxqModal>
      </div>
    </div>
  </div>
</template>
<script setup>
import $api from "@/utils/request.js"
import { ref, onMounted, nextTick } from "vue"
import titleBox from "../mConponents/titleBox.vue"
import mTable from "../mConponents/mTable.vue"
import mTableAuto from "../mConponents/mTableAuto.vue"
import gzryModal from "../mConponents/modal/gzryModal.vue"
import rqxqModal from "../mConponents/modal/rqxqModal.vue"
import sjxqModal from "../mConponents/modal/sjxqModal.vue"

onMounted(() => {
  init()
})
const content = ref(null)
const height = ref(0)
const show = ref(false)
const init = async () => {
  await getData(1)
  await getData(3)
  await getData(4)
  nextTick(() => {
    height.value = content.value.offsetHeight
    // show.value = true
  })
}
const sjxqModalRef = ref(null)
const clickRow = (e) => {
  sjxqModalRef.value.show(e)
}
const getData = async (e) => {
  if (e === 1 || e === 3) {
    const res = await $api.get("/api/V1/getZdgz", { type_status: e })
    if (res.code === 1) {
      if (e === 1) {
        valueData.value[0] = res.data.data
      }
      if (e === 3) {
        valueData.value[1] = res.data.data
      }
    }
  } else if (e === 4) {
    const res = await $api.get("api/index/get_appeal_list", { is_zd: 2 })
    if (res.code === 1) {
      res.data.data.forEach(e => {
        if (e.is_solve === "1") {
          e.state = "待处理"
        } else if (e.is_solve === "2") {
          e.state = "已处理"
        } else if (e.is_solve === "3") {
          e.state = "处理中"
        } else if (e.is_solve === "4") {
          e.state = "已逾期"
        }
      })
      valueData.value[2] = res.data.data
    }
  }

}

const gzryModalRef = ref(null)
const gzryModalShow = () => {
  gzryModalRef.value.show()
}
const checkedChange = (e) => {
  isChecked.value = e
  if (e === 0) {
    gzryModalShow()
  }
}
const checkedChange1 = (e) => {
  isChecked.value = e
}
const rqxqModalRef = ref(null)
const rqxqModalClose = () => {
  gzryModalRef.value.show()
}
const rowClick = (e) => {
  rqxqModalRef.value.show(e)
  gzryModalRef.value.close()
}
const isChecked = ref(0)

const titleData = [
  [{
    name: "姓名",
    key: "name",
    style: {
      width: "60px"
    }
  },
  {
    name: "内容",
    key: "neirong",
    style: {
      flex: 1
    }
  }],
  [{
    name: "地点",
    key: "name",
    align: true,
    style: {
      width: "80px"
    }
  }, {
    name: "内容",
    key: "neirong",
    align: true,
    style: {
      flex: 1
    }
  }],
  [{
    name: "内容",
    key: "content",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "类型",
    key: "appear_type",
    style: {
      width: "60px"
    }
  },
  {
    name: "状态",
    key: "state",
    style: {
      width: "40px"
    }
  },
  {
    name: "创建时间",
    key: "createtime",
    style: {
      width: "65px"
    }
  },
  {
    name: "操作",
    type: "btn",
    btns: ["查看详情"],
    style: {
      width: "50px"
    }
  }]
]
const valueData = ref([[], [], []])
defineExpose({ checkedChange1 })
</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  width: 330px;
  margin-top: 5px;
  // display: flex;
  // align-items: center;
  // justify-content: space-between;

  .top {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;

    .top_item_checked {
      flex: 1;
      padding: 5px 10px 5px 3px;
      display: flex;
      align-items: center;
      border: 2px solid #00C5DB80;
      background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 1);
        font-weight: bold;
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 1);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        // background-image: url('/img/myimg/lefticon1.png');
        background-size: 17px 17px;
        width: 17px;
        height: 17px;
        margin-right: 3px;
      }
    }

    .top_item {
      flex: 1;
      padding: 5px 10px 5px 3px;
      display: flex;
      align-items: center;
      border: 2px solid #00C5DB10;
      // border-image-source: ;


      background: linear-gradient(180deg, rgba(0, 61, 60, 0.5) 0%, rgba(0, 117, 117, 0.5) 100%);

      .top_item_name {
        font-size: 10px;
        color: rgba(213, 242, 255, 0.6);
        flex: 1;
      }

      .top_item_num {
        color: rgba(158, 247, 255, 0.6);
        font-weight: bold;
        font-size: 12px;
      }

      .top_item_leftIcon {
        background-size: 17px 17px;
        width: 17px;
        height: 17px;
        margin-right: 3px;
      }
    }
  }
}
</style>
